<!-- 设备管理 -->
<template>
  <div>
    <div class="searchbox">
      <el-form :inline="true" size="small" label-width="100px">
        <jt-easy-collapse :has-expand="true">
          <template slot="expand">
              <el-form-item label="设备编号">
                <el-input size="small" v-model="form.code" placeholder="设备编号"></el-input>
              </el-form-item>
              <el-form-item label="设备名称">
                <el-input size="small" v-model="form.name" placeholder="设备名称"></el-input>
              </el-form-item>
              <el-form-item label="检测项目名称">
                <el-input size="small" placeholder="检测项目名称"></el-input>
              </el-form-item>
              <el-form-item style="margin-left: 20px;">
                <el-button size="mini" type="primary" @click='showList'>查询</el-button>
              </el-form-item>
              <el-form-item>
                <el-button size="mini" @click='clearForm'>清除</el-button>
              </el-form-item>
</template>
        </jt-easy-collapse>
      </el-form>
    </div>
    <div class="contentbox">
      <div style="float: left;padding-left: 20px;font-size: 15px;color: #666;padding-top: 6px;">
        设备信息 共 <span style="color: red;">{{totalElements}}</span> 条数据
      </div>
      <el-row style="float: right;margin-right: 20px;margin-bottom: 15px;" type="flex" justify="end">
        <el-col>
          <jt-table-column-filter tableName='deviceManagement' :table-key.sync="tableKey" :header-data.sync="tableHeaderArr" :filter-column.sync="filterColumnData"></jt-table-column-filter>
          <el-button size="small" type="primary" @click="addOrder">新增</el-button>
             <el-button size="small" type="primary" @click="deleteBatch">批量删除</el-button>

        </el-col>
      </el-row>
      <device-info-order :show.sync="isShowDevice" @refreshAdd="showList"></device-info-order>
      <device-info-order-modify :show.sync="isShowModify" :modifyId="modifyId" @refreshEdit="showList"></device-info-order-modify>
      <!-- 表格 -->
      <el-table :data="tableData" :key='tableKey' v-loading="loading" @selection-change="handleSelectionChange" stripe>
        <el-table-column type="selection" width="50" align="center" :resizable="false"></el-table-column>
        <el-table-column :index="indexMethod" type="index" label="序号" width="50" align="center" :resizable="false"></el-table-column>
        <el-table-column align="center" :key='item' v-for='item in filterColumnData' :resizable="false"
            :label="getTableHeaderLabel(item)"
            :prop="item"
            :min-width="getTableColumnWidth(item)"
            :fixed="getTableColumnFixed(item)"
            :sortable="getTableColumnSort(item)">
<template slot-scope="scope">
   {{scope.row[item]}}
  <el-button v-if="item === 'operate'" size="small" type="text" @click="modifyOrder(scope.row)">修改</el-button>
  <el-button v-if="item === 'operate'" size="small" type="text" @click='delDevice(scope.row)'>删除</el-button>

</template>
        </el-table-column>
      </el-table>
      <el-row type="flex" justify="center">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="pageSizeArr"
          :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pageTotal"></el-pagination>
      </el-row>
    </div>
  </div>
</template>

<script>
import JtTableColumnFilter from "components/jt-table-column-filter/index"; // 导入表格列筛选组件
import JtEasyCollapse from "components/jt-easy-collapse/index";
import DeviceInfo from "dialog/resource-management/device-management/device-info-order";
import ModifyDeviceInfo from "dialog/resource-management/device-management/device-info-order-modify";
import { getDviceList, deleteDevice,deviceAllDelete,checkRole } from "service/task";
import { STATUS_LIST } from "service/constant";
import { getLableFromList } from "utils/common";
export default {
  name: "RemindingCenter",
  components: {
    "jt-table-column-filter": JtTableColumnFilter,
    "jt-easy-collapse": JtEasyCollapse,
    "device-info-order": DeviceInfo,
    "device-info-order-modify": ModifyDeviceInfo
  },
  data() {
    return {
      tableKey: 1, // table key
      filterColumnData: [],
        selectCount: 0,
        checkRole:checkRole,
      tableHeaderArr: [
        {
          name: "code",
          alias: "设备编号",
          default: true,
          width: 110,
          fixed: false,
          sort: true
        },
        {
          name: "name",
          alias: "设备名称",
          default: true,
          width: 170,
          fixed: false,
          sort: true
        },
        {
          name: "unit",
          alias: "单位",
          default: false,
          width: 80,
          fixed: false,
          sort: true
        },
        {
         name: "workTime",
         alias: "工作时间(分钟)",
         default: true,
         width: 150,
         fixed: false,
         sort: true
         },
        {
          name: "brand",
          alias: "品牌",
          default: true,
          width: 80,
          fixed: false,
          sort: true
        },
        {
          name: "producer",
          alias: "厂家",
          default: true,
          width: 100,
          fixed: false,
          sort: true
        },
        {
          name: "position",
          alias: "放置位置",
          default: true,
          width: 120,
          fixed: false,
          sort: true
        },
        {
          name: "ownerUid",
          alias: "负责人",
          default: true,
          width: 100,
          fixed: false,
          sort: true
        },
        {
          name: "statusStr",
          alias: "设备状态",
          default: true,
          width: 110,
          fixed: false,
          sort: true
        },
        {
          name: "remark",
          alias: "备注",
          default: true,
          width: 230,
          fixed: false,
          sort: true
        },
        {
          name: 'projectcode5',
          alias: '工作时间',
          default: true,
          width: 230,
          fixed: false,
          sort: true
        },
        {
          name: "operate",
          alias: "操作",
          default: true,
          width: 190,
          fixed: "right",
          sort: false
        }
      ],
      tableData: [],
      loading: false,
      form: {
        code: "",
        name: ""
      },
      currentPage: 1,
      pageSizeArr: [10, 20, 50, 100],
      pageSize: 10,
      pageTotal: 0,
      page: 0,
      isShowDevice: false,
      isShowModify: false,
      modifyId: "",
      totalElements: 0
    };
  },
  mounted() {
    this.showList();
  },
  methods: {
    indexMethod(index) {
        return index + this.pageSize * (this.currentPage-1) + 1;
      },
    delDevice(row) {
      let confirm = this.$confirm('您确定删除吗?','提示',{
          // confirmButtonText: '确定',
          // cancelButtonText: '取消',
          type: 'warning'
        }).then(res => {
         deleteDevice(row.id).then(res => {
        if (res.data.success) {
         this.$message({
            message: res.data.message,
            type: 'success',
            duration: 1000
            });
          this.showList();
        }
      });
      }).catch(res => {
         return
     });
    },
   deleteBatch() {
if (this.selectCount <= 0) {
        this.$Message.warning("您还未选择要删除的数据");
        return;
      }
      this.$Modal.confirm({
        title: "确认删除",
        content: "您确认要删除所选的 " + this.selectCount + " 条数据?",
        onOk: () => {
          let ids = "";
          this.selectList.forEach(function(e) {
            ids += e.id + ",";
          });
          ids = ids.substring(0, ids.length - 1);
          deviceAllDelete({ids: ids.split(",")}).then(res => {
            if (res.data.success === true) {
              this.$Message.success("删除成功");
               this.showList();
            }
          });
        }
      });
    },
    // 新增
    addOrder() {
      this.isShowDevice = true;
    },
    clearForm() {
      this.form = {};
      this.showList();
    },
    // 修改
    modifyOrder(row) {
      this.modifyId = row.id;
      this.isShowModify = true;
    },
    // 获取表格多选的值
    handleSelectionChange(val) {
        this.selectList = val;
        this.selectCount = val.length;
    },
    handleSizeChange(val) {
      this.pageSize = val;
       this.showList();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.showList();
    },
    // 表格数据展示
    showList() {
      let params = {
        code: this.form.code,
        name: this.form.name,
        pageNumber: this.currentPage,
        pageSize: this.pageSize,
        sort: "",
        order: ""
      };
      this.loading = true;
      getDviceList(params).then(res => {
        this.tableData = res.data.result.content;
        // this.currentPage = res.data.result.pageable.pageNumber;
        this.pageSize = res.data.result.pageable.pageSize;
        this.pageTotal = res.data.result.totalElements;
        this.totalElements = res.data.result.totalElements;
        this.loading = false;
        this.tableData.forEach(e => {
          e.statusStr = getLableFromList(STATUS_LIST, e.status);
        });
      });
    },
    // 表头展示
    getTableHeaderLabel(str) {
      return this.getTableSomeValue(str, "alias");
    },
    // 获取表格列的宽度
    getTableColumnWidth(str) {
      return this.getTableSomeValue(str, "width");
    },
    // 获取表格列是否是固定的
    getTableColumnFixed(str) {
      return this.getTableSomeValue(str, "fixed");
    },
    // 获取表格列是否排序
    getTableColumnSort(str) {
      return this.getTableSomeValue(str, "sort");
    },
    // 获取表格表头，列宽度，列固定，列排序的值
    getTableSomeValue(str, keyName) {
      for (var value of this.tableHeaderArr) {
        if (value["name"] == str) {
          return value[keyName];
        }
      }
    }
  }
};
</script>
